<template>
  <div class="icon-wrapper" :style="{ ...style }">
    <svg class="icon">
      <use :href="iconName"></use>
    </svg>
  </div>
</template>

<script setup>
  import { computed, defineProps } from 'vue';

  const props = defineProps({
    name: {
      type: String,
    },
    prefix: {
      type: String,
      default: 'icon-',
    },
    style: Object,
  });

  const iconName = computed(() => `#${props.prefix}${props.name}`);
</script>

<style lang="less" scoped>
  .icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
    overflow: hidden;
  }
  .icon-wrapper {
    display: inline-block;
  }
</style>
